<template>
    <div style="width:1080px;">
        <p style="width:1035px;margin:30px 1284px 0 0;background-color:#F3F3F3; padding: 20px; border: solid 1px #dbdbdb"><el-button @click="tj">添加</el-button></p>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="appVersionId" label="编号" width="100">
            </el-table-column>
            <el-table-column prop="appVersionName" label="版本名称" width="120">
            </el-table-column>
            <el-table-column prop="appVersionCode" label="版本号" width="120">
            </el-table-column>
            <el-table-column prop="fileName" label="下载名称" width="120">
            </el-table-column>
            <el-table-column prop="filePath" label="下载地址" width="120">
            </el-table-column>
            <el-table-column prop="createDate" label="更新日期" width="120">
            </el-table-column>
            <el-table-column prop="updateStart" label="是否强制更新" width="200">
                <template slot-scope="scope">
                    <!-- scope.row 包含表格里当前行的所有数据 -->
                    <span :class="scope.row.updateStart?'act':'inact'">
                        {{scope.row.updateStart == 1? ('是'):('否')}}
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加新版本" :visible.sync="dialogTableVisible">
            <el-card class="box-card">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange">
                    <el-button style="margin: 0 0 30px 100px;" size="small" type="primary">上传安装包</el-button>
                </el-upload>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="版本名称">
                        <el-input v-model="form.appVersionName"></el-input>
                    </el-form-item>
                    <el-form-item label="版本号">
                        <el-input v-model="form.appVersionCode"></el-input>
                    </el-form-item>
                    <el-form-item label="更新描述">
                        <el-input type="textarea" v-model="form.appVersionMiaoshu"></el-input>
                    </el-form-item>
                    <el-form-item label="是否更新">
                        <el-radio-group v-model="form.updateStart">
                            <el-radio value="1" label="是"></el-radio>
                            <el-radio value="2" label="否"></el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "AppVersion",
        methods: {
            handleClick(row) {
                console.log(row);
            },
            tj(){
                this.dialogTableVisible =true;
            },
            onSubmit(){
                this.$http.get("/appversion/appVersionAdd").then(e => {
                    alert(e.data)
                })
            },
            handleChange(file, fileList) {
                this.fileList = fileList.slice(-3);
            }
        },
        data() {
            return {
                tableData: [],
                dialogTableVisible: false,    //打开详情弹窗
                form: {
                    appVersionId: 0,
                    appVersionName: '',
                    appVersionCode: '',
                    fileName: '',
                    filePath: '',
                    createdDate: '',
                    updateStart: 2,
                    appVersionMiaoshu: '',
                }
            }
        },
        created(){
            this.$http.get("/appversion/appVersionGetAll").then(e => {
                this.tableData = e.data;
            })
        }
    }
</script>

<style scoped>

</style>